<template>
  <view class="my-page">
    <!-- nav -->
    <view
      class="header-user"
      :style="{ background: setStatus ? currGradient : '#fff' }"
    >
      <view class="info" @click="toInfo">
        <view class="left">
          <view class="avatar">
            <image
              :src="
                userInfo.avatar
                  ? userInfo.avatar
                  : '/static/icon/avatar-default.png'
              "
              class="avatar-img"
            />
          </view>
          <view class="detail">
            <view
              class="title"
              :style="{ color: setStatus ? '#fff' : '#222' }"
              >{{ userInfo.nickname ? userInfo.nickname : "登录账号" }}</view
            >
            <view
              class="desc"
              :style="{
                color: setStatus ? '#f2f2f2' : '#666',
                opacity: setStatus ? 0.6 : 1,
              }"
              >{{ userInfo.departmentTitle }}</view
            >
          </view>
        </view>
        <view class="right">
          <tui-icon
            name="qrcode"
            :color="setStatus ? '#f2f2f2' : '#999'"
            size="20"
            unit="px"
            class="r"
            :style="{ opacity: setStatus ? 0.6 : 1 }"
          />
          <tui-icon
            name="arrowright"
            :color="setStatus ? '#f2f2f2' : '#999'"
            size="25"
            unit="px"
            :style="{ opacity: setStatus ? 0.6 : 1 }"
          />
        </view>
      </view>
      <view class="status">
        <view class="add" v-if="!setStatus" @click="addStatus">
          <tui-icon
            name="plus"
            color="#666"
            size="13"
            unit="px"
            class="r"
          />添加状态
        </view>
        <view class="status-content" v-else @click="changeStatus">
          <view class="content">{{ status }}</view>
          <image :src="statusIcon" class="icon" v-show="statusIcon" />
        </view>
      </view>
    </view>

    <tui-list-cell
      padding="14px 15px"
      :size="16"
      arrow
      class="margin-tb"
      @click="toNav('wallet')"
    >
      <view class="cell-item">
        <view class="iconfont icon-wallet" style="color: #f65200" />钱包
      </view>
    </tui-list-cell>
    <tui-list-view>
      <tui-list-cell padding="14px 15px" :size="16" arrow>
        <view class="cell-item">
          <view class="iconfont icon-star" style="color: #feaf00" />收藏
        </view>
      </tui-list-cell>
      <tui-list-cell
        padding="14px 15px"
        :size="16"
        arrow
        @click="toNav('help')"
      >
        <view class="cell-item">
          <view
            class="iconfont icon-customerservice"
            style="color: #059f73"
          />帮助与客服
        </view>
      </tui-list-cell>
    </tui-list-view>
    <tui-list-cell
      padding="14px 15px"
      :size="16"
      arrow
      class="margin-tb"
      @click="toNav('setting')"
    >
      <view class="cell-item">
        <view class="iconfont icon-setting" style="color: #198fff" />设置
      </view>
    </tui-list-cell>
  </view>
</template>

<script>
import { config } from "@/config";
export default {
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  data() {
    return {
      opacity: 0,
      checkToken: "",
      setStatus: false,
      status: "",
      statusIcon: "",
      currGradient: "linear-gradient(90deg, #96AEBC, #CB6E77)",
      colorList: [
        "linear-gradient(180deg, #9BABD9, #81A6DC)",
        "linear-gradient(180deg, #D78979, #D07050)",
        "linear-gradient(180deg, #A6B8AE, #7DB6B7)",
        "linear-gradient(180deg, #B198B7, #A396C4)",
        "linear-gradient(180deg, #50655D, #4F6559)",
        "linear-gradient(180deg, #BDC2BA, #C3BBB6)",
        "linear-gradient(180deg, #4B545B, #4B525C)",
        "linear-gradient(90deg, #96AEBC, #CB6E77)",
      ],
    };
  },
  onLoad() {
    this.listen();
  },
  methods: {
    listen() {
      uni.$on("addStatus", (data) => {
        this.doChangeStatus(data);
      });
    },
    toInfo() {
      uni.navigateTo({
        url: "/pages/my/info/info",
      });
    },
    addStatus() {
      uni.navigateTo({
        url: "/pages/my/setStatus/setStatus",
      });
    },
    doChangeStatus(v) {
      // 生产随机数
      this.status = v.title;
      this.statusIcon = v.icon;
      let index = Math.floor(Math.random() * this.colorList.length);
      this.currGradient = this.colorList[index];
      this.setStatus = true;
    },
    changeStatus() {
      uni.showActionSheet({
        itemList: ["设置新状态", "修改状态", "结束状态"],
        success: (res) => {
          let index = res.tapIndex;
          if (index == 0) {
            uni.navigateTo({
              url: "/pages/my/setStatus/setStatus",
            });
          } else if (index == 1) {
            uni.navigateTo({
              url: "/pages/my/setStatus/setStatus",
            });
          } else if (index == 2) {
            this.setStatus = false;
          }
        },
        fail: function (res) {
          console.log(res.errMsg);
        },
      });
    },
    toNav(v) {
      if (v == "setting") {
        uni.navigateTo({
          url: "/pages/setting/setting",
        });
      } else if (v == "wallet") {
        uni.navigateTo({
          url: "/pages/wallet/wallet",
        });
      } else if (v == "help") {
        uni.navigateTo({
          url:
            "/pages/public/webView/webView?url=" +
            config.domain +
            "/chat/chat.html?accessToken=" +
            this.getToken(),
        });
      }
    },
    back() {
      uni.navigateBack();
    },
    login() {
      uni.navigateTo({
        url: "/pages/auth/login/login",
      });
    },
    scan() {},
  },
};
</script>

<style lang="scss" scoped>
@import "./my.scss";
</style>
